<template>
  <div class="container">

    <!-- -----------------------------------------------------------------过滤器一栏---------------------------------- -->
    <div class="filter-container">
      <el-input
        v-model="listQuery.name"
        :placeholder="table.name"
        style="width: 200px;"
      />
      <el-button
        type="primary"
        icon="Search"
      >
        {{ listQuery.search}}
      </el-button>
      <el-button
        style="margin-left: 10px"
        type="primary"
        icon="Edit"
        @click="createClass"
      >
        {{ listQuery.creClass}}
      </el-button>
    </div>


    <!-- -----------------------------------------------------------------班级管理表格栏---------------------------------- -->
    <div class="table-container">
      <el-table
        :data="classgradesData"
        border
        fit
        highlight-current-row
        style="width: 100%;height: 100%"
        scrollbar-always-on="true"
      >
        <el-table-column
          :label="table.number"
          type="index"
          align="center"
          width="80px"
        >
        </el-table-column>
        <el-table-column
          :label="table.headPortrait"
          prop="headPortrait"
          width="180px"
          align="center"
        >
        </el-table-column>
        <el-table-column
          :label="table.name"
          prop="name"
          width="150px"
        >
        </el-table-column>
        <el-table-column
          :label="table.teaNumber"
          prop="teaNumber"
          width="100px"
        >
        </el-table-column>
        <el-table-column
          :label="table.stuNumber"
          prop="stuNumber"
          width="100px"
        >
        </el-table-column>
        <el-table-column
          :label="table.actions"
          align="center"
          min-width="100px"
        >
          <template #default="scope">
            <el-button
              type="primary"
              size="mini"
              @click="detailedInfo(scope.row)"
            >
              {{ table.detail}}
            </el-button>
            <!-- <el-button
              size="mini"
            >
              {{ table.edit }}
            </el-button> -->
            <el-button
              size="mini"
              type="danger"
              @click="delClass(scope.row)"
            >
              {{ table.delete }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>      
    </div>
  </div>
</template>

<script>
import { onMounted, reactive, toRefs } from 'vue'
// import axios from '@/utils/axios'
import { ElMessage, ElMessageBox } from 'element-plus'
export default {
  name: 'Good',
  setup() {
    const state = reactive({
      loading: false,
      tableData: [], // 数据列表
      multipleSelection: [], // 选中项
      total: 0, // 总条数
      currentPage: 1, // 当前页
      pageSize: 10 // 分页大小
    })
    const dataMap = reactive({
      listQuery: {
        page: 1,
        limit: 10,
        className: "班级名称",
        search: "搜索",
        creClass: "创建班级",
        addTeacher:"任命教师"
      },
      table: {
        number: "序号",
        headPortrait: "班级头像",
        name: "名称",
        teaNumber: "教师数量",
        stuNumber: "学生数量",

        actions: "操作",
        detail: "查看信息",
        edit: "编辑信息",
        add: "添加老师",
        delete: "删除班级"
      },
      classgradesData: "",
    })
    onMounted(() => {
    })
    
    return {
      ...toRefs(state),
      ...toRefs(dataMap)
    }
  },
  methods: {
      // 创建班级
      createClass() {
          this.$router.push('/administractor/createclass')
      },
      // 获取班级基本信息
      getClassgradeBasicInfo() {
        var _this = this
        this.$axios
          .get('/administractor/classgrade/basicinfo')
          .then( response => {
              let stateCode = response.headers["state"]
              if(stateCode=="200"){
                this.classgradesData = response.data
              }
              else if(stateCode==""){
                  // this.$message.success("请求数据异常！")
              }
              else{
                  this.$message.error(this.$enum.getDescByValue('STATE', stateCode))
              }

          })
          .catch(function (error){
              let stateCode = error.response.headers["state"]                            
              if(stateCode!=""){
                  _this.$message.error(_this.$enum.getDescByValue('STATE', stateCode))
              }
              else{
                  _this.$message.error("后端异常")
              }
          })
          .then(function (){
              console.log("测试成功")
          })   
      },
      // // 查看班级详细信息
      // detailedInfo(classgrade){
      //     console.log(classgrade)
      // },
      // 查看具体的班级信息
      detailedInfo(classgrade) {
        this.$router.push({
          path: '/administractor/cgdetailedinfo',
          name: 'AdministractorCgDetailedInfo',
          params: {
            classgradeId: classgrade.classgradeId,
            classgradeName: classgrade.name
          },
          query: {
            classgradeId: classgrade.classgradeId
          }
        })
      },
      // 删除班级
      delClass(classgrade){
          var _this = this
          ElMessageBox.confirm('你确定删除班级"' + classgrade.name +  '"吗？', '警告',
              {
                  confirmButtonText: 'Yes',
                  cancelButtonText: 'Cancel',
                  type: 'warning',
              }
          )
              .then(() => {
                let formData = new FormData()
                formData.append("classgradeId",classgrade.classgradeId)
                this.$axios
                    .post('classgrade/del',formData)
                    .then(response=> {                    
                        let stateCode = response.headers["state"]
                        if(stateCode=="200"){
                          location.reload()
                          this.$message.success("删除班级成功！！")
                        }
                        else if(stateCode==""){
                          this.$message.error("操作异常!")
                        }
                        else{
                          this.$message.error(this.$enum.getDescByValue('STATE', stateCode))
                        }
                    })
                    .catch(function (error){                          
                        let stateCode = error.response.headers["state"]                            
                        if(stateCode!=""){
                            _this.$message.error(_this.$enum.getDescByValue('STATE', stateCode))
                        }
                        else{
                          _this.$message.error("后端异常")
                        }
                    })
                    .then(function (){
                        console.log("测试成功")
                    }) 
                  })
              .catch(() => {
                  ElMessage({
                      type: 'error',
                      message: '已取消删除',
                  })
              })
      }
  },
  mounted() {
    this.getClassgradeBasicInfo()
  }
}
</script>

<style scoped>
  .container {
    height: 100%;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    box-sizing: border-box;
  }
  .el-card.is-always-shadow {
    min-height: 100%!important;
  }

  .filter-container {
    height: 10%;
    width: 100%;
    padding: 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    box-sizing: border-box;
  }

  .table-container {
    height: 90%;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
  }
</style>